<template>
    <view class="goods-item" @tap="buyProduct">
		<view class="img-box">
			<image class="image" :src="item.pic + '_300x300.jpg'" :lazy-load="true" @load="finishLoad"></image>
			<view class="loading" v-if="loading">
				<view class="load-item pink"></view>
				<view class="load-item red"></view>
				<view class="load-item orange"></view>
				<view class="load-item yellow"></view>
			</view>
		</view>
		<view class="goods-content">
			<view class="coupon-name">
				<view class="goods-name">{{ item.title }}</view>
				<view class="end-price">券后价: ¥{{ Number(item.endPrice) }}</view>
			</view>
			
			<view class="goods-info">
				<view class="goods-price">
					¥
					<text class="estimate-price">{{ calcEstimatePrice }}</text>
					<text class="title">
						<text v-if="calcReceiveMoney > 0">领{{calcReceiveMoney}}元</text>
						预估支付
					</text>
				</view>
				<view class="buy">抢购</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        name: "GoodsItem",
        props: {
            item: {
                type: Object,
                default: () => {
                    return {}
                }
            },
			receiveMoney: {
				type: Number,
				default: () => {
				    return 7;
				}
			}
        },
		data() {
			return {
				loading: true,
				calcReceiveMoney: 0
			}
		},
		computed: {
			calcEstimatePrice() {
				if (this.receiveMoney === 7 && Number(this.item.estimatePrice) > 2) {
					// 最高7元礼金预估使用7元
					this.calcReceiveMoney = 0;
					return (Number(this.item.estimatePrice) - 2).toFixed(2);
				} else if (this.receiveMoney === 7 && Number(this.item.estimatePrice) > 1 && Number(this.item.estimatePrice) <= 2) {
					// 最高7元礼金预估使用6元
					if (this.calcReceiveMoney !== 6) {
						this.calcReceiveMoney = 6;
					}
					return (Number(this.item.estimatePrice) - 1).toFixed(2);
				} else if (this.receiveMoney === 7 && Number(this.item.estimatePrice) >= 0 && Number(this.item.estimatePrice) <= 1) {
					// 最高7元礼金预估使用5元
					if (this.calcReceiveMoney !== 5) {
						this.calcReceiveMoney = 5;
					}
					return (Number(this.item.estimatePrice)).toFixed(2);
				} else if (this.receiveMoney === 6 && Number(this.item.estimatePrice) > 1) {
					// 最高6元礼金预估使用6元
					this.calcReceiveMoney = 0;
					return (Number(this.item.estimatePrice) - 1).toFixed(2);
				} else if (this.receiveMoney === 6 && Number(this.item.estimatePrice) >= 0 && Number(this.item.estimatePrice) <= 1) {
					// 最高6元礼金预估使用5元
					if (this.calcReceiveMoney !== 5) {
						this.calcReceiveMoney = 5;
					}
					return (Number(this.item.estimatePrice)).toFixed(2);
				} else if (this.receiveMoney === 5) {
					// 最高5元礼金预估使用5元
					this.calcReceiveMoney = 0;
					return (Number(this.item.estimatePrice)).toFixed(2);
				} else if (this.receiveMoney === 4) {
					// 最高4元礼金预估使用4元
					this.calcReceiveMoney = 0;
					return (Number(this.item.estimatePrice) + 1).toFixed(2);
				} else if (this.receiveMoney === 3) {
					// 最高3元礼金预估使用3元
					this.calcReceiveMoney = 0;
					return (Number(this.item.estimatePrice) + 2).toFixed(2);
				} else if (this.receiveMoney === 2) {
					// 最高2元礼金预估使用2元
					this.calcReceiveMoney = 0;
					return (Number(this.item.estimatePrice) + 3).toFixed(2);
				} else {
					this.calcReceiveMoney = 0;
					return (Number(this.item.estimatePrice)).toFixed(2);
				}
			}
		},
		methods: {
			// 图片加载完成
			finishLoad() {
				this.loading = false;
			},
			// 商品购买
			buyProduct() {
				let vm = this;
				uni.showLoading({
					title: '正在打开淘宝...'
				})
				let params = {
					title: vm.item.title,
					itemId: vm.item.gid,
					url: vm.item.link
				}
				vm.$service.shopping.taobao.privilege(params).then(res => {
					uni.hideLoading();
					uni.setClipboardData({
						data: res.tkl,
						success: function() {
							vm.$emit('onCopySuccess', res.coupon_click_url);
						},
						fail: function() {
							
						}
					});
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
.goods-item {
	width: 710rpx;
	padding: 20rpx ;
	box-sizing: border-box;
	background: #fff;
	margin: 0 10rpx 20rpx;
	border-radius: 16rpx;
	@include flexBox();
	.img-box {
		width: 198rpx;
		height: 198rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		.loading {
			position: absolute;
			width: 100%;
			height: 100%;
			@include flexBox(center);
			.load-item {
				width: 20rpx;
				height: 100rpx;
				margin: 0 10rpx;
				border-radius: 50rpx;
				&.pink {
					background: #fb889b;
					animation: pink 0.8s infinite;
				}
				&.red {
					background: #fb8888;
					animation: red 0.8s infinite;
				}
				&.orange {
					background: #fba488;
					animation: orange 0.8s infinite;
				}
				&.yellow {
					background: #fbc188;
					animation: yellow 0.8s infinite;
				}
			}
		}
		.image {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}
	.goods-content {
		height: 198rpx;
		margin-left: 16rpx;
		flex: 1;
		overflow-x: auto;
		overflow-y: hidden;
		@include flexBox(space-between, null, column);
		.coupon-name {
			color: #696A6B;
			font-size: 24rpx;
			.goods-name {
				font-size: 28rpx;
				color: #030303;
				@include ellipsis(2);
			}
			.end-price {
				margin-top: 10rpx;
			}
		}
		.goods-info {
			margin-top: 14rpx;
			@include flexBox(space-between);
			.goods-price {
				color: $uni-color-primary;
				font-size: 28rpx;
				font-weight: 600;
				.estimate-price {
					font-size: 36rpx;
					margin-right: 20rpx;
				}
				.title {
					font-size: 24rpx;
				}
			}
			.buy {
				color: #fff;
				line-height: 44rpx;
				padding: 0 24rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
				background: linear-gradient(319deg,rgba(253,0,59,1) 0%,rgba(255,63,129,1) 100%);
			}
		}
	}
}
@keyframes pink {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes red {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
@keyframes orange {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes yellow {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
</style>
